<!--
 * @Author: dzj
 * @Date: 2021-11-15 22:50:19
 * @Description: 
-->
<template>
  <div class="title1">
    <!-- <iframe width="100%" height="750px" :src="'https://spectreattack.com/spectre.pdf'" ></iframe> -->
    <el-header>
      <span class="siteIcon" style="font-size: 24px; color: #e9eef3">
        <img src="../assets/no_border.png" @click="returnlink" style="height:70px" />
      </span>
      <span class="return">
        <el-button
          type="text"
          @click="returnlink"
          style="font-size: 24px; color: #e9eef3"
          >回到首页</el-button
        >
      </span>
      <el-dropdown class="cyr-drop" v-if="this.$store.getters.isLogin==true||this.$store.getters.isLogin=='true'">
        <span class="el-dropdown-link">
            <span
            class="span4"
            style="
              width: 100px;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
              white-space: normal;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              float: right;
              font-weight:600;">
            {{ $store.getters.userName }}
          </span>
          <div class="span4" style="float: right;font-weight:600;">您好,</div>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="returnmydoor">我的门户</el-dropdown-item>
            <el-dropdown-item divided @click="returnperinfo"
              >账户信息</el-dropdown-item
            >
            <el-dropdown-item divided @click="returnout"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button
        class="login"
        type="text"
        @click="login"
        style="font-size: 24px; color: #e9eef3;"
        v-else
        >登录</el-button
      >
    </el-header>


    <div class="head">
      <div class="logo">
        <img
          style="height: 126px; width: 200px; padding-left: 15px"
          src="../assets/logo1.png"
        />
      </div>
      <div class="type">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <el-checkbox-group
          v-model="typeGroup"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox
            style="vertical-align: left; margin-left: 10%"
            v-for="item in types"
            :key="item.index"
            :label="item"
            >{{ item }}</el-checkbox
          >
        </el-checkbox-group>

        <!-- <span class="span1" v-for="item in types" :key="item.value">{{
          item.label
        }}</span> -->
      </div>
      <div class="input">
        <!-- <div style="margin-top: 15px width: 500px">
        <el-input
          v-model="input3"
          placeholder="Please input"
          class="input-with-select"
        >
          <template #prepend>
            <el-select
              v-model="select"
              placeholder="Select"
              style="width: 110px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-input>
      </div> -->
        <el-select
          class="select"
          v-model="value"
          placeholder="主题"
          default-first-option:true
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-input class="inputting" v-model="input" placeholder="" @keyup.enter="gotosearch"/>
        <el-button
          type="primary"
          class="search_button"
          style="
            width: 20%;
            padding-left: 20px;
            background: #0d7dec;
            margin-left: 10%;
            padding: 0 40px;
            letter-space: 10px;
          "
          @click="gotosearch"
        
          >搜索</el-button
        >
        <el-button type="text" style="margin-left: 1%" @click="gosuper"
          >高级检索>></el-button
        >
      </div>
      <div class="history">
        <span class="spannull">历史记录： </span>
        <span
          class="span3"
          v-for="item in history"
          :key="item.index"
          @click="search_his(item)"
          style="
            width: 8%;
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            white-space: normal;
            line-height: 30px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          "
          >{{ item }}</span
        >
      </div>
    </div>
    <!-- <search-preview v-if="ispreview"></search-preview> -->
    <!-- <detail></detail> -->
  </div>
</template>

<script>
// import axios from 'axios'
//import SearchPreview from "../components/SearchPreview.vue";
//import Detail from './Detail.vue';
// const types = ["专利", "期刊", "会议"];
import { ElMessage } from "element-plus";
export default {
  //components: { SearchPreview },
  props: ["input1", "value1", "typeGroup1"],
  data() {
    return {
      types: ["论文", "期刊", "专著", "专利", "会议"],
      // types: [
      //   {
      //     value: "article",
      //     label: "论文",
      //   },
      //   {
      //     value: "journal",
      //     label: "期刊",
      //   },

      //   {
      //     value: "book",
      //     label: "图书",
      //   },
      //   {
      //     value: "patent",
      //     label: "专利",
      //   },
      // ],
      //传递value
      options: [
        {
          value: "",
          label: "主题",
        },
        {
          value: "key",
          label: "关键词",
        },

        {
          value: "author",
          label: "作者",
        },
      ],
      history: [],
      // history: [
      //   {
      //     value: "year",
      //     label: "li",
      //   },
      //   {
      //     value: "month",
      //     label: "睡眠",
      //   },
      //   {
      //     value: "day",
      //     label: "英语",
      //   },
      // ],
      files: [
        {
          number: 1,
          name: "基于波动与扩散物理系统的机器学习",
          type: "期刊论文",
          author: ["陈江芷", "杨晨", "温任捷"],
          source: "《物理学报》 2021年14期",
          abstract:
            "物理学在机器学习中的应用以及两者的交叉融合正引起广泛关注,尤其是在波动系统和扩散系统中.本文重点关注波动与扩散物理系统和机器学习之间的内在联系以及对机器学习算法和物理实现的推进作用,综述了波动系统和扩散系统中的机器学习研究,介绍了部分最新研究成果.文中首先讨论了监督学习的波动系统实现,包括神经网络的波动光学实现、量子搜索的波动实现、基于波动系统的递归神经网络以及神经形态的非线性波动计算.接着,文中继续讨论了受扩散系统启发的机器学习算法,如基于扩散动力学的分类算法,基于热扩散的数据挖掘和信息过滤,以及基于群体扩散的搜索优化等.波动系统以其天然的并行性、高效、低能耗等优势,通过丰富的波动力学和波动物理现象进行计算或算法模拟,正成为机器学习的新型物理载体.扩散系统中的物理机制可以启发构建高效的机器学习算法,用于复杂系统和物理学研究中的分类、优化等问题.期望通过对波动、扩散物理系统与机器学习内在联系的讨论,能够为开发物理启发的新算法和硬件实现甚至软硬一体化带来抛砖引玉的启示. ",
          key_words: ["波动系统", "扩散系统", "机器学习", "人工神经网络"],
        },
        {
          number: 2,
          name: "基于波动与扩散物理系统的机器学习",
          type: "期刊论文",
          author: ["陈江芷", "杨晨", "温任捷"],
          source: "《物理学报》 2021年14期",
          abstract:
            "物理学在机器学习中的应用以及两者的交叉融合正引起广泛关注,尤其是在波动系统和扩散系统中.本文重点关注波动与扩散物理系统和机器学习之间的内在联系以及对机器学习算法和物理实现的推进作用,综述了波动系统和扩散系统中的机器学习研究,介绍了部分最新研究成果.文中首先讨论了监督学习的波动系统实现,包括神经网络的波动光学实现、量子搜索的波动实现、基于波动系统的递归神经网络以及神经形态的非线性波动计算.接着,文中继续讨论了受扩散系统启发的机器学习算法,如基于扩散动力学的分类算法,基于热扩散的数据挖掘和信息过滤,以及基于群体扩散的搜索优化等.波动系统以其天然的并行性、高效、低能耗等优势,通过丰富的波动力学和波动物理现象进行计算或算法模拟,正成为机器学习的新型物理载体.扩散系统中的物理机制可以启发构建高效的机器学习算法,用于复杂系统和物理学研究中的分类、优化等问题.期望通过对波动、扩散物理系统与机器学习内在联系的讨论,能够为开发物理启发的新算法和硬件实现甚至软硬一体化带来抛砖引玉的启示. ",
          key_words: ["波动系统", "扩散系统", "机器学习", "人工神经网络"],
        },
        {
          number: 3,
          name: "基于波动与扩散物理系统的机器学习",
          type: "期刊论文",
          author: ["陈江芷", "杨晨", "温任捷"],
          source: "《物理学报》 2021年14期",
          abstract:
            "物理学在机器学习中的应用以及两者的交叉融合正引起广泛关注,尤其是在波动系统和扩散系统中.本文重点关注波动与扩散物理系统和机器学习之间的内在联系以及对机器学习算法和物理实现的推进作用,综述了波动系统和扩散系统中的机器学习研究,介绍了部分最新研究成果.文中首先讨论了监督学习的波动系统实现,包括神经网络的波动光学实现、量子搜索的波动实现、基于波动系统的递归神经网络以及神经形态的非线性波动计算.接着,文中继续讨论了受扩散系统启发的机器学习算法,如基于扩散动力学的分类算法,基于热扩散的数据挖掘和信息过滤,以及基于群体扩散的搜索优化等.波动系统以其天然的并行性、高效、低能耗等优势,通过丰富的波动力学和波动物理现象进行计算或算法模拟,正成为机器学习的新型物理载体.扩散系统中的物理机制可以启发构建高效的机器学习算法,用于复杂系统和物理学研究中的分类、优化等问题.期望通过对波动、扩散物理系统与机器学习内在联系的讨论,能够为开发物理启发的新算法和硬件实现甚至软硬一体化带来抛砖引玉的启示. ",
          key_words: ["波动系统", "扩散系统", "机器学习", "人工神经网络"],
        },
        {
          number: 1,
          name: "基于波动与扩散物理系统的机器学习",
          type: "期刊论文",
          author: ["陈江芷", "杨晨", "温任捷"],
          source: "《物理学报》 2021年14期",
          abstract:
            "物理学在机器学习中的应用以及两者的交叉融合正引起广泛关注,尤其是在波动系统和扩散系统中.本文重点关注波动与扩散物理系统和机器学习之间的内在联系以及对机器学习算法和物理实现的推进作用,综述了波动系统和扩散系统中的机器学习研究,介绍了部分最新研究成果.文中首先讨论了监督学习的波动系统实现,包括神经网络的波动光学实现、量子搜索的波动实现、基于波动系统的递归神经网络以及神经形态的非线性波动计算.接着,文中继续讨论了受扩散系统启发的机器学习算法,如基于扩散动力学的分类算法,基于热扩散的数据挖掘和信息过滤,以及基于群体扩散的搜索优化等.波动系统以其天然的并行性、高效、低能耗等优势,通过丰富的波动力学和波动物理现象进行计算或算法模拟,正成为机器学习的新型物理载体.扩散系统中的物理机制可以启发构建高效的机器学习算法,用于复杂系统和物理学研究中的分类、优化等问题.期望通过对波动、扩散物理系统与机器学习内在联系的讨论,能够为开发物理启发的新算法和硬件实现甚至软硬一体化带来抛砖引玉的启示. ",
          key_words: ["波动系统", "扩散系统", "机器学习", "人工神经网络"],
        },
      ],
      value: this.value1,
      checkAll: false,
      // checkedCities: ["上海", "北京"],
      //cities: cityOptions,
      isIndeterminate: false,

      //输入框部分
      title: "",
      author: "",
      key: "",
      ispreview: true,
      //以下需要传递
      input: this.input1,
      typeGroup: this.typeGroup1, //此处暂时有bug，等待修改

      //value为选中索引
      super: false, //高级检索
    };
  },
  methods: {
    returnmydoor() {
      if (this.$store.state.own_door == true||this.$store.state.own_door == "true") {
        if (this.$store.state.isCompany == true||this.$store.state.isCompany == "true") {
          this.$router.push("/mycompanydoor");
        } else this.$router.push("/mydoortrue");
      } else this.$router.push("/mydoorfalse");
    },
    returnperinfo() {
      this.$router.push("/personalcenterforsee");
    },
    returnout() {
      this.$router.push("/");
      this.$store.commit("updateown_door", false);
      this.$store.commit("updateUserName", "");
      this.$store.commit("updateUserID", "");
      this.$store.commit("updateUserEmail", "");
      this.$store.commit("updateCTA", "");
      this.$store.commit("updateMPID", "");
      this.$store.commit("updatePID", "");
      this.$store.commit("updateIsLogin", false);
    },
    returnlink() {
      this.$router.push("/");
    },
    login(){
      this.$router.push("/login");
    },

    search_his(value) {
      this.input = value;
    },
    // handleCheckAllChange(val) {
    //   this.typeGroup = val ? types : [];
    //   this.isIndeterminate = false;
    // },
    // handleCheckedCitiesChange(value) {
    //   let checkedCount = value.length;
    //   this.checkAll = checkedCount === this.cities.length;
    //   this.isIndeterminate =
    //     checkedCount > 0 && checkedCount < this.cities.length;
    // },

    handleCheckAllChange(val) {
      console.log(this.typeGroup);
      this.typeGroup = val ? this.types : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      console.log(this.typeGroup);

      let checkedCount = value.length;
      this.checkAll = checkedCount === this.types.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.types.length;
    },
    gotosearch() {
      let tmp = 1;
      console.log(this.history);
      if (this.history !== null) {
        this.history.forEach((item) => {
          if (this.input === item) {
            tmp = 0;
          }
        });
      }
      if (tmp && this.input !== "") {
        console.log(this.history);
        let list = this.history === null ? [] : this.history;
        list.push(this.input);
        localStorage.setItem("history", JSON.stringify(list));
      }
      if (this.input === "") {
        ElMessage("请输入检索内容");
      } else {
        // if (this.value === "") {


        //   this.value = null;
        // }
        localStorage.setItem("super", false);
        this.$router.push({
          name: "SearchPreview",
          params: {
            input: this.input,
            typeGroup: this.typeGroup,
            value: this.value,
            files: this.files,
          },
        });
        this.$emit("changesearch", this.files);
      }

      // axios.post('code/',this.input,this.typeGroup,this.value).then((response) => {
      //   this.$router.push('/searchpreview/'+this.input+response)
      // })
    },
    gosuper() {
      localStorage.setItem("super", true);
      this.$router.push({
        name: "SuperSearchPreview",
      });
    },
  },
  created() {
    localStorage.setItem("super", false);
    console.log(Object());
    if (JSON.parse(localStorage.getItem("history")) !== null) {
      this.history = JSON.parse(localStorage.getItem("history"));
      if (this.history.length >= 8) {
        this.history = this.history.slice(-6);
      }
    } else {
      this.history = [];
    }
    if (this.$store.getters.userID == "") {
      this.whetherin = false;
    } else this.whetherin = true;
  },
};
</script>

<style>
.title1 .el-header {
  background-color: #1047b4;
  color: #1047b4;
  text-align: center;
  line-height: 60px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.title1 .el-button--text {
  border-color: transparent;
  color: var(--el-color-primary);
  background: 0 0;
  padding-left: 0;
  padding-right: 0;
  font-weight: 600;
}
.title1 .siteIcon {
  position: absolute;
  left: 100px;
  top: -5px;
  color: #e9eef3;
}
.title1 .return {
  position: absolute;
  left: 200px;
  top: 2px;
  color: #e9eef3;
  /* font-weight: 700; */
}
.title1 .login {
  position: absolute;
  right: 120px;
  top: 2px;
  color: #e9eef3;
  /* font-weight: 700; */
}
.title1 .el-dropdown {
  position: absolute;
  left: 1200px;
  color: #e9eef3;
  font-size: 22px;
  font-weight: 400;
  line-height: 60px;
}

.span4:hover {
  cursor: pointer;
}
.head {
  height: 25%;
  background-color: rgb(234, 244, 250);
  box-shadow: 0px 1px 5px 0px #746969;
}
.type {
  margin-left: 23%;
  margin-bottom: -8px;
  padding-top: 0.85%;
  width: 70%;
  /* width: 800px; */
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.main {
  display: flex;
  flex-flow: row nowrap;
  height: 1000px;
}
.span3 {
  margin-left: 2%;
  color: rgb(91, 154, 248);
}
.span3:hover {
  cursor: pointer;
  color: rgb(40, 192, 184);
}
.span2 {
  margin-left: 5%;
  color: #000;
}
.span2:hover {
  cursor: pointer;
  color: rgb(40, 192, 184);
}
.history {
  margin-left: 23%;
  padding-bottom: 01%;
  padding-top: 0.5%;
  width: 70%;
  /* width: 500px; */
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.input {
  padding-top: 0.5%;
  margin-left: 23%;
  width: 75%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

/* .el-select .el-input {
  width: 100px;
  color: blue;
}
.input-with-select .el-input-group__prepend {
  background-color: rgb(223, 235, 241);
  border-left: 2px solid rgb(65, 122, 226);
  border-top: 2px solid rgb(65, 122, 226);
  border-bottom: 2px solid rgb(65, 122, 226);
  color: blue;
}
.el-select .el-input .el-select__caret {
  color: blue;
}
.el-input-group--prepend .el-input__inner {
  width: 350px;
  background-color: #fff;
  border-right: 2px solid rgb(65, 122, 226);
  border-top: 2px solid rgb(65, 122, 226);
  border-bottom: 2px solid rgb(65, 122, 226);
} */

/* .el-button {
  background: #0d7dec;
  width: 100px;
  margin-left: 10%;
} */
.input .el-select .el-input {
  width: 100%;
  color: rgb(80, 144, 218);
}
.select {
  width: 20%;
  border-left: 2px solid rgb(65, 122, 226);
  border-top: 2px solid rgb(65, 122, 226);
  border-bottom: 2px solid rgb(65, 122, 226);
  border-right: rgb(72, 116, 192);
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #0c7dec;
}
.inputting {
  border-right: 2px solid rgb(65, 122, 226);
  border-top: 2px solid rgb(65, 122, 226);
  border-bottom: 2px solid rgb(65, 122, 226);
  border-left: 1px solid rgb(192, 211, 245);
  width: 100%;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}
.input .el-select .el-input__inner {
  cursor: pointer;
  display: inline-flex;
  border-top: 2px solid;
  border-bottom: 2px solid;
  background-color: #0c7dec;
  /* border-right: rgb(195, 212, 241); */
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
  color: rgb(242, 245, 248);
  border: transparent;
}
.select:hover {
  outline: 0;
  border-color: transparent;
}
.inputting .el-input__inner {
  width: 100%;
  border-left: transparent;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}
.inputting .el-input__inner:focus {
  outline: 0;
  border-color: transparent;
  /* border-color: var(--el-input-focus-border,var(--el-color-primary)); */
}
/*placdholder颜色*/
.select input::-webkit-input-placeholder {
  -webkit-text-fill-color: #f4f6f7;
}
/*图标*/
.input .el-select .el-input .el-select__caret {
  color: #e4ebf1;
}

.type .el-checkbox {
  /* height: 200px; */
  margin-right: 0px;
}
.el-checkbox_label {
  width: 800px;
}
.search_button .el-button__text--expand {
  letter-spacing: 0.6em;
}
.type .el-checkbox-group {
  font-size: 0;
  width: 533px;
}
.logo {
  position: absolute;
  background-color: transparent;
  top: 9%;
  left: 5%;
}
</style>
